import './Scss/SupervisionMap.scss'
import dayjs from 'dayjs'
import { Http } from '../../../../Common/Api'
import { project } from '../../../../Common/Data'
import { useState, useRef, useEffect } from 'react'
import { useEventEmitter, useRequest } from 'ahooks'
import { Initialization, InitializationData } from '../../../../Common/Mars3d/Initialization'
import { WebTemplateUrl } from './configuration'
const { imageUrl } = project[window.location.hostname]
const { mars3d } = window

export const SupervisionMap001 = ({ uuid }) => {
    const [Color] = useState({
        Z1: '#07CCB0',
        Z2: '#BFFFA7',
        Z3: '#FF817C',
        Z4: '#ACCDFF',
        Z5: '#B9ECED',
    })
    const Mars3dBox = useRef()
    const InitializationEvent = useEventEmitter()
    InitializationEvent.useSubscription(({ map, gra, uuid }) => {
        getScenesDetails({ url: `getScenesDetailsUuid`, path: [uuid] }).then(res =>
            InitializationData(map, gra, res, true),
        )
        getGetAttendancesList({
            url: 'getGetAttendancesList',
            data: {
                pageSize: 100000,
                IdentityLevel: 2,
                BeginAttendanceTime: dayjs().format('YYYY-MM-DD') + ' 00:00:00',
                EndAttendanceTime: dayjs().format('YYYY-MM-DD') + ' 23:59:59',
            },
        }).then(({ list }) => {
            list.forEach(key => {
                let name = `${key.organizationName} - ${key.personTypeName} - ${key.personName}`
                let positions = [key.lng, key.lat, 0]
                const graphic = new mars3d.graphic.BillboardPrimitive({
                    position: positions,
                    style: {
                        image: `${imageUrl}/${key.organizationName}.png `,
                        clampToGround: true,
                        scale: 0.3,
                        label: {
                            text: name,
                            color: Color[key.organizationName],
                            pixelOffsetY: -50,
                        },
                    },
                })
                gra.addGraphic(graphic)
            })
        })
    })

    const { runAsync: getGetAttendancesList } = useRequest(Http, { manual: true })
    const { runAsync: getScenesDetails } = useRequest(Http, { manual: true })
    const { run: getScenes } = useRequest(Http, {
        manual: true,
        onSuccess: res => Initialization(res, Mars3dBox, InitializationEvent),
    })
    useEffect(() => {
        getScenesDetails({ url: `getGetBeamSeatBeamModel` }).then(({ list }) => {
            getScenes({ url: `getScenesID`, path: [uuid] })
        })
    }, [getScenes, getScenesDetails, uuid])
    return (
        <div className="SupervisionMap001">
            <div className="OverviewMap" ref={Mars3dBox}></div>
            <img className="Mask" src={WebTemplateUrl + 'Mask.png'} alt="" />
        </div>
    )
}
